<template>
  <div class="headerRightNav">
    <div class="l-content">
      <el-button size="small" @click="handleCollapse">
        <component class="menu-icon" is="menu"></component>
      </el-button>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
        <el-breadcrumb-item v-if="current" :to="{ path: current.path }" > {{ current.label }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="r-content">
      <el-dropdown>
        <span class="el-dropdown-link">
          <img :src="getUerImgUrl('user')" class="user-img" />
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item @click="handleClose()">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
  
<script lang="ts" setup>
import { computed, ref } from "vue";
import { useAllDataStore } from "@/stores";
import router from "@/router";
const allDataStore = useAllDataStore();
const handleCollapse = () =>{
  allDataStore.state.isCollapsible = !allDataStore.state.isCollapsible;
}

const getUerImgUrl = (user: string) => {
  return new URL(`../assets/images/${user}.png`, import.meta.url).href;
};
const handleClose = () => {
  allDataStore.clear();
  router.push("/login");
}
const current = computed( ()=> allDataStore.state.currentMenu );
</script>
<style scoped>
.headerRightNav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  height: 100%;
}
.l-content {
  display: flex;
  .el-button{
    margin-left: 10px;
  }
  .el-breadcrumb {
    margin: 5px 0 0 10px;
  }
}
/* .l-content .el-button {
  margin-left: 10px;
} */
/* .l-content .el-breadcrumb {
  margin: 5px 0 0 10px;
} */
:deep(.el-breadcrumb__inner) {
  color: #ffffff !important;
  cursor:  pointer !important;
}

.r-content {
  width: 100px;
  align-items: center;
}
.menu-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
  fill: #fff;
}
.user-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}
</style>